console.log("link product.js")
//讲对应的jsp/html和js文件连接在一起的操作方式是在body结束前添加对应的script语句 link对应的src
//这个控制台会输出到browser中

const nav_button = document.getElementById("nav-button");
// let elContent = document.getElementById("content");

let xhr = ''

function sentMsg(categoryId){
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = process;
    //建立连接
    xhr.open('GET',"http://localhost:8080/demo_war_exploded//ch08/productForm?categoryId="+categoryId);
    //发送请求
    xhr.send(null);
}

function process(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            let a = "ok"
            let response = xhr.responseXML;
            readXML(response);
        }
    }
}

function readXML(responseXML){
    //responseXML返回document对象
    let elContent = document.getElementById("content");

    var products = responseXML.getElementsByTagName('product');
    console.log(products)

    for(let i=0;i<products.length;i++){
        var container = document.createElement('div');
        //样式类名
        container.className = 'product'

        // ${"#div.content"}.html(name);//那这个name是怎么获得的呢


        var name = document.createElement('p');
        var namevalue = products[i].getElementsByTagName('name')[0].firstChild.nodeValue;
        var textnode = document.createTextNode(namevalue);
        name.appendChild(textnode);
        container.appendChild(name)
    
        var image = document.createElement('img');
        var imagevalue =products[i].getElementsByTagName('desc')[0].firstChild.nodeValue;
        image.setAttribute('src',imagevalue)

        container.appendChild(image)

        elContent.appendChild(container);
    }
    //这里如何new一个新的出来
}

nav_button.addEventListener('click',function(e){
    const categoryId = e.target.textContent;
    // console.log(categoryId);
    sentMsg(categoryId);
})


// $(function(){
//     $("header".addClass("headline"))
// });